<template>
  <!-- 导航菜单容器，router表示开启路由控制，一般都要设置 -->
  <!-- 还可以可控制背景颜色，字体颜色 -->
  <el-menu router :default-active="$route.path" background-color="#2A3F54" text-color="#fff" >
    <h1 class="aside-title">科泰购管理系统</h1>
    <el-row class="aside-user">
      <el-col :span="10" :offset="2">
        <!-- 头像组件，比较简单，size表示大小，src图片地址 -->
        <el-avatar :size="60" :src="$store.state.userStore.userInfo.avatar">
        </el-avatar>
      </el-col>
      <!-- 显示用户信息 -->
      <el-col :span="12">
        <h3>管理员</h3>
        <h3>{{$store.state.userStore.userInfo.nickname}}</h3>
      </el-col>
    </el-row>
    <!-- el-submenu表示子菜单 -->
<!--    <el-submenu index="1">
      <template slot="title">
        <i class="el-icon-user"></i>
        <span>会员管理</span>
      </template>
      &lt;!&ndash; el-menu-item表示子菜单项,index设置为路由path，则可以跳转 &ndash;&gt;
      <el-menu-item index="/user/list">
        <i class="el-icon-user-solid"></i>
        会员列表
      </el-menu-item>
    </el-submenu>-->

<!--    <el-submenu index="3">
      <template slot="title">
        <i class="el-icon-news"></i>
        <span>新闻管理</span>
      </template>
      <el-menu-item index="/news/list">
        新闻列表
      </el-menu-item>
    </el-submenu>-->
<!--    <el-submenu index="4">
      <template slot="title">
        <i class="el-icon-setting"></i>
        <span>系统管理</span>
      </template>
      <el-menu-item index="/changepwd">
        修改密码
      </el-menu-item>
    </el-submenu>-->
    <el-submenu index="2">
      <template slot="title">
        <i class="el-icon-s-management"></i>
        <span>新闻分类管理</span>
      </template>
      <el-menu-item index="/news-type/list">
        分类列表
      </el-menu-item>
    </el-submenu>
  </el-menu>
</template>

<script>
  export default {
    name:"LeftMenu"
  }
</script>

<style>
  /* 设置菜单所有标题样式文字靠左 */
  .el-submenu__title {
    text-align: left;
  }
  .aside-title {
    color: #fff;
    font-size: 25px;
    width: 220px;
    text-align: center;
  }
  .aside-user {
    color: #fff;
  }
  .aside-user h3 {
    margin: 5px;
  }
</style>
